<template>
  <view class="page">
    <view class="header">
      <view class="money">余额：￥{{ money.amount }}</view>
      <view class="tip" v-if="model.data_key==='wechat'">
        提示：提现手续费{{ cashConfig.fee }}元/次,单笔提现金额最高500元，请务必保证会员姓名为微信实名信息，否则无法到账。
      </view>
      <view v-else>
        提示：提现手续费{{ cashConfig.fee }}元/次,单笔提现金额最高500元，请务必保证会员姓名为微信实名信息，否则无法到账。
      </view>
    </view>
    <view class="content">
      <view class="input">
        <view class="title">
          <text class="required">*</text>
          提现金额
        </view>
        <input style="width: 450rpx;" type="digit" v-model="form.money" class="txt" maxlength="20"
               placeholder="请输入提现金额"/>
      </view>
      <view class="bank_info" v-if="cashConfig.data_key==='bank'">
        <view class="h1">收款信息</view>
        <view class="h5">收款人:{{ model.bankAccount }}</view>
        <view class="h5">卡号:{{ model.bankNo }}</view>
        <view class="h5">开户行:{{ model.bankName }}</view>
      </view>
      <view v-else-if="cashConfig.data_key==='wechat'">
        <view class="input">
          <view class="title">
            <text class="required">*</text>
            真实姓名
          </view>
          <input style="width: 450rpx;" v-model="form.name" class="txt" maxlength="20"
                 placeholder="请输入提现人微信认证的姓名"/>
        </view>
      </view>
      <view v-else></view>

      <view class="h2" v-if="total>0">提现记录</view>

      <view class="item" v-for="item in pageData.data" :key="item.id">
        <view class="item_header">
          <view class="item_money" style="display: flex;">
            <view>
              提现:￥{{ item.money }}
            </view>
            <view style="margin-left: 20rpx;">
              到账:￥{{ item.cash }}
            </view>
          </view>
          <view class="item_date">{{ item.addDate }}</view>
        </view>
        <view class="tip" style="display: flex;justify-content: space-between;">
          <view>
            收款人:{{ item.name }}
          </view>
          <view>
            打款状态:{{ item.sendStateName }}
          </view>

        </view>
      </view>

      <uni-load-more :status="status" v-if="totalPage>1"></uni-load-more>
      <view class="none_view"></view>

    </view>

    <view class="bt_area">
      <button class="bt" @click="cash" :disabled="disabled">提现</button>
    </view>
  </view>
</template>

<script setup>
import {ref} from 'vue';
import {useShowData} from "../../common/data";
import {usePageData} from "../../common/usePageData";
import {post} from "../../common/api";

const model = ref([])
const form = ref({
  money: null,
  name: null
})
const disabled = ref(false);

const {data: money} = useShowData("my_money",{})
const {data: cashConfig} = useShowData("cash_config_view",{dataKey:"wechat"})


let searchObject = ref({
  no: 1,
  size: 20,
  sortField: "id",
  sortMethod: "desc"
});
const {
  pageData,
  status,
  totalPage,
  initData,
  total,
  loadMore
} = usePageData("cash_my_list", searchObject)

const cash = async () => {

  // if(form.value.name===null||form.value.name===""){
  // 	uni.showModal({
  // 		showCancel:false,
  // 		content:"提现人姓名不能为空"
  // 	})
  // 	return;
  // }
  if (form.value.money === null || form.value.money === "") {
    uni.showModal({
      showCancel: false,
      content: "提现金额不能为空"
    })
    return;
  }
  if (cashConfig.value.data_key === "wechat") {
    console.info("微信提现")
    if (form.value.name === '' || form.value.name === undefined || form.value.name == null || form.value
        .name.length < 2) {
      uni.showModal({
        showCancel: false,
        content: "请填写提现人姓名"
      })
      return
    }
  }

  uni.showLoading({
    title: "数据加载中"
  })
  disabled.value = true;


  form.value.cashConfig = cashConfig.value.id
  form.value.remark = "主理人提现";


  form.value.cashType = model.value.catalogCashType;
  let resCash = await post("/customerCash/cash", form.value)
  if (resCash.code !== 200) {
    uni.hideLoading();
    disabled.value = false;
    uni.showModal({
      showCancel: false,
      content: resCash.msg
    })
    return
  }
  uni.navigateBack();
}
</script>

<style lang="scss">
.required {
  color: red;
}

.header {
  box-shadow: 0px 1px 15px 0px #ECECEC;
  padding: 50rpx 40rpx;
  width: 100vw;
  box-sizing: border-box;
}


.header .money {
  height: 33px;
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #333333;
  line-height: 22px;


}

.header .tip {
  font-size: 14px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #999999;
  line-height: 20px;


}

.content {
}

.input {
  padding: 30rpx 40rpx;
  width: 100vw;
  box-sizing: border-box;
  text-align: left;
  border-bottom: 1px solid #EEEEEE;
  display: flex;
  flex-direction: row;
  align-items: center;

}

.bank_info {
  padding: 0rpx 40rpx;
  margin-top: 40rpx;
  margin-bottom: 20rpx;
  width: 100vw;
  box-sizing: border-box;
}

.h1 {
  margin-top: 10rpx;
  margin-bottom: 10rpx;
  font-size: 32rpx;
}

.input .title {
  font-size: 14px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #333333;
  margin-right: 20rpx;
}

.input .txt {
  font-size: 14px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #333333;
}

.h2 {
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #666666;
  line-height: 20px;
  padding-left: 40rpx;
  padding-right: 40rpx;
  border-bottom: 1px solid #EEEEEE;
  padding-bottom: 40rpx;
  padding-top: 20rpx;
}

.h5 {
  color: #666666;
  margin-top: 10rpx;
  margin-bottom: 10rpx;
}


.item_header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.item {
  padding-left: 40rpx;
  padding-right: 40rpx;
  border-bottom: 1px solid #EEEEEE;
  padding-bottom: 20rpx;
  padding-top: 20rpx;
}

.item_money {
  font-size: 16px;
  font-weight: 500;
  color: #333333;
  line-height: 26px;


}

.item_date {
  height: 20px;
  font-size: 14px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #999999;
  line-height: 20px;
}

.tip {
  font-size: 14px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #666666;
  line-height: 24px;
  margin: 15rxp 0rpx;
}

.cash {
  margin-left: 40rpx;
  margin-top: 20rpx;
  color: #F1AB40;
}

.none_view {
  width: 100vw;
  height: 180rpx;
}


.bt_area {
  position: fixed;
  left: 0px;
  right: 0px;
  bottom: 40rpx;
  height: 100rpx;
  display: flex;
  justify-content: center;
}

.bt {
  width: 90vw;
  height: 44px;
  background: linear-gradient(315deg, #AA0E99 0%, #AA0E99 100%);
  border-radius: 28px;
  text-align: center;
  line-height: 44px;
  font-size: 18px;
  color: #fff;
}
</style>
